<!--
 * @Description: 系统参数设置
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:29:53
 * @LastEditTime: 2021-11-15 08:45:16
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <div class="info">
      <!-- 系统参数设置 -->
      <h1 class="title">{{$t('systerms.SystermsParams')}}</h1>
      <el-form
        :model="form"
        class="form"
        :rules="rules"
        ref="ruleForm"
        :label-width="labelWidth"
        label-position="right"
      >
        <!-- 控制器IP -->
        <el-form-item label="IPv4控制器IP" prop="ipAddress">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.ipAddress" :disabled="!isEdit" />
          </el-col>
        </el-form-item>
        <!-- 控制器IP -->
        <el-form-item label="IPv6控制器IP" prop="ipv6Address">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.ipv6Address" :disabled="!isEdit" />
          </el-col>
        </el-form-item>
        <!-- 同时登录数 -->
        <el-form-item :label="$t('systerms.SameLoginCount')" prop="sum">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number v-model="form.sum" :disabled="!isEdit" :min="1" :max="10" />
          </el-col>
        </el-form-item>
        <!-- 账户过期时间 -->
        <el-form-item label="密码有效期" prop="expires">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number v-model="form.expires" :disabled="!isEdit" :min="60" :max="3650" />&nbsp;&nbsp; 天
          </el-col>
        </el-form-item>
        <!-- 会话超时时间 -->
        <el-form-item label="会话超时时间" prop="timeout">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number v-model="form.timeout" :disabled="!isEdit" :min="1" :max="60" />&nbsp;&nbsp; 分钟
          </el-col>
        </el-form-item>
        <el-form-item>
          <!-- '保存' : '编辑' -->
          <el-button
            type="primary"
            style="width: 90px"
            @click="edit"
            v-power="1"
          >{{isEdit ? $t('systerms.Save') : $t('systerms.Edit')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isEdit: false,
      oldform: {},
      form: {
        ipAddress: null,
        ipv6Address: null,
        sum: 1,
        expires: 60,
        timeout: 30
      },
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.sysConfig();
    });
  },
  computed: {
    labelWidth () {
      let currentLang = this.$i18n.locale;
      let temp = 100;
      if (currentLang === 'cn') {
        temp = 120;
      } else {
        temp = 120;
      }
      return temp + 'px';
    },
    rules () {
      return {
        ipAddress: [{ required: false, message: this.$t('systerms.PlaceholderByControllerIP'), trigger: 'blur' }],
        sum: [{ required: true, message: this.$t('systerms.PlaceholderByDefaultLimitNumber'), trigger: 'change' }],
        expires: [{ required: true, message: '请填写密码最大有效期', trigger: 'change' }],
        timeout: [{ required: true, message: '请填写会话超时时间', trigger: 'change' }]
      };
    }
  },
  methods: {
    sysConfig () {
      let _this = this;
      _this.$http.get({
        url: '/api/sys/option'
      }).then(res => {
        for (let i = 0; i < res.children.length; i++) {
          if (res.children[i].name === 'USER' || res.children[i].name === 'SDWAN' || res.children[i].name === 'SYSTEM') {
            for (let j = 0; j < res.children[i].children.length; j++) {
              if (res.children[i].children[j].name === 'USER.MAXCLIENT') {
                _this.form.sum = Number(res.children[i].children[j].value);
                _this.oldform.sum = Number(res.children[i].children[j].value);
              }
              if (res.children[i].children[j].name === 'USER.PWDEXPIRES') {
                _this.form.expires = Number(res.children[i].children[j].value);
                _this.oldform.expires = Number(res.children[i].children[j].value);
              }
              if (res.children[i].children[j].name === 'SDWAN.CONTROLLERIP') {
                _this.form.ipAddress = res.children[i].children[j].value;
                _this.oldform.ipAddress = res.children[i].children[j].value;
              }
              if (res.children[i].children[j].name === 'SDWAN.CONTROLLERIPV6') {
                _this.form.ipv6Address = res.children[i].children[j].value;
                _this.oldform.ipv6Address = res.children[i].children[j].value;
              }
              if (res.children[i].children[j].name === 'SYSTEM.SESSION.TIMEOUT') {
                _this.form.timeout = Number(res.children[i].children[j].value);
                _this.oldform.timeout = Number(res.children[i].children[j].value);
              }
            }
          }
        }
      });
    },
    edit () {
      let _this = this;
      if (_this.isEdit) {
        _this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            _this.isEdit = !_this.isEdit;
            if (_this.oldform.sum !== _this.form.sum) {
              _this.$http.put({
                url: '/api/sys/option/value/USER.MAXCLIENT?action=update',
                data: _this.form.sum
              }).then(res => {
                _this.$message.success(this.$t('systerms.SetLimitNumSuccess'));
                _this.sysConfig();
              });
            }
            if (_this.oldform.expires !== _this.form.expires) {
              _this.$http.put({
                url: '/api/sys/option/value/USER.PWDEXPIRES?action=update',
                data: _this.form.expires
              }).then(res => {
                _this.$message.success('密码最大有效期设置成功！');
                _this.sysConfig();
              });
            }
            // if (_this.oldform.ipAddress !== _this.form.ipAddress) {
            _this.$http.put({
              url: '/api/sdwan/setting/controller/update',
              data: {
                ip: _this.form.ipAddress
              }
            }).then(res => {
              _this.$message.success(this.$t('systerms.SetControllerIPSuccess'));
              _this.sysConfig();
            });
            // }
            // if (_this.form.ipv6Address) {
            if (_this.oldform.ipv6Address !== _this.form.ipv6Address) {
              _this.$http.put({
                url: '/api/sdwan/setting/controller/update/v6',
                data: {
                  ip: _this.form.ipv6Address
                }
              }).then(res => {
                _this.$message.success(this.$t('systerms.SetControllerIPSuccess'));
                _this.sysConfig();
              });
            }
            // }
            if (_this.oldform.timeout !== _this.form.timeout) {
              _this.$http.put({
                url: '/api/sys/option/value/SYSTEM.SESSION.TIMEOUT?action=update',
                data: _this.form.timeout
              }).then(res => {
                _this.$message.success('会话超时时间设置成功！');
                _this.sysConfig();
              });
            }
          } else {
            _this.$message.error(this.$t('systerms.CheckRequired'));
          }
        });
      } else {
        _this.isEdit = !_this.isEdit;
      }
    }
  },
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;

  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .page-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>